<template>
  <el-popover
    :placement="placement"
    width="213"
    v-model="deleteVisible"
    trigger="manual"
    class="popconfirm"
  >
    <p class="popconfirm__main">
      <i
        class="el-icon-question"
        style="color: #ff9900;margin-right: 5px"
      ></i>
      {{ content }}
    </p>
    <div class="popconfirm__action">
      <el-button
        size="mini"
        type="text"
        @click="deleteVisible = false"
      >取消</el-button>
      <el-button
        size="mini"
        type="primary"
        @click="onConfirm"
      >确定</el-button>
    </div>
    <el-button
      slot="reference"
      :type="buttonConfig.type"
      icon="el-icon-delete"
      class="operate-btn"
      @click="deleteVisible = true"
    >删除</el-button>
  </el-popover>
</template>
<script>
export default {
  name: "Popconfirm",
  props: {
    placement: {
      type: String,
      default: "top"
    },
    content: {
      type: String,
      default: "确定要删除选中的内容吗？"
    },
    buttonConfig: {
      type: Object,
      default: () => {
        return {
          type: "text"
        };
      }
    },
    onConfirm: {
      type: Function
    }
  },
  data() {
    return {
      deleteVisible: false
    };
  }
};
</script>
<style lang="scss">
.popconfirm {
  color: #606266;
  line-height: 1.4;
  text-align: justify;
  font-size: 14px;
}
.popconfirm__main {
  display: flex;
  align-items: center;
}
.popconfirm__action {
  text-align: right;
}
</style>
